<template>
  <div class="maingl">
    <div class="main_spac1">
      <div class="main_white padding10">
        <div class="main_crumbs">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>维护菜单</span>
          </div>
          <div class="boxdq">
            <div></div>
            <el-button type="primary" @click="editAction()">新增菜单</el-button>
          </div>
        </div>

        <div>
          <el-table
            :data="list"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            align="center"
            :expand-row-keys="['-1']"
            :tree-props="{ children: 'selfNext' }"
          >
            <el-table-column prop="name" label="菜单名称">
            </el-table-column>
            <el-table-column prop="ordid" label="排序" width="180">
              <!-- <template slot-scope="scope">
                <el-input @change="change($event,scope.row.id,'ordid')" v-if="scope.row.id != -1" class="ordid_input" size="mini" v-model="scope.row.ordid"> </el-input>
              </template> -->
              <template slot-scope="scope"  v-if="scope.row.id != -1">
                <div class="mainus_pe">
                  <div v-if="!scope.row.edit" class="content_svg">
                    {{ scope.row.ordid }}
                    <svg
                      aria-hidden="true"
                      class="main_page_svg svg_edit"
                      width="13"
                      height="13"
                      @click.stop="scope.row.edit = true;"
                    >
                      <use xlink:href="#icon-commodity_modify" />
                    </svg>
                  </div>
                  <div v-else class="boxnr">
                    <el-input
                      v-model="scope.row.ordid"
                      placeholder=""
                      class="wid80"
                    ></el-input>
                    <div class="boxnr svg_box">
                      <svg
                        aria-hidden="true"
                        class="main_page_svg marginLeft5 svg_add"
                        width="20"
                        height="20"
                        @click.stop="
                          change(scope.row.ordid, scope.row.id, 'ordid'),
                            (scope.row.edit = false)
                        "
                      >
                        <use xlink:href="#icon-index_tick" />
                      </svg>
                      <svg
                        aria-hidden="true"
                        class="main_page_svg marginLeft5"
                        width="12"
                        height="12"
                        @click.stop="
                          (scope.row.ordid = scope.row.ordid_old),
                            (scope.row.edit = false)
                        "
                      >
                        <use xlink:href="#icon-index_cross" />
                      </svg>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="display" label="显示"  width="180">
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.id != -1"
                  v-model="scope.row.display"
                  active-color="#03a98e"
                  :active-value="1"
                    :inactive-value="0"
                  @change="change($event,scope.row.id,'display')"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="front_end_show" label="后台菜单显示"  width="180">
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.id != -1"
                  v-model="scope.row.front_end_show"
                  active-color="#03a98e"
                  :active-value="1"
                  :inactive-value="0"
                  @change="change($event,scope.row.id,'front_end_show')"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="180">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.id != -1"
                  @click="editAction(scope.row.id)"
                  type="text"
                  size="mini"
                  class="handle_btn"
                  >编辑</el-button
                >
                <el-button
                  v-if="scope.row.id != -1"
                  @click="delAction(scope.row.id)"
                  type="text"
                  size="mini"
                  class="handle_btn del"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getData, role_accredit } from "@/api/global/globalRole";
import { menuList,editMenu,deleteMenu } from "@/api/user/userMenu";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  components: {},
  data() {
    return {
      // 列表数据
      list: [],
      listLoading: false,
      // 树型tree
      //   defaultkeys: [],
      defaultProps: {
        children: "selfNext",
        label: "name",
      },
      // type
      type: this.$route.params.type,
      // 监听滚动
      searchBarFixed: false,
    };
  },
  created() {
    // 菜单列表
    this.getData();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    //去新增、编辑
    editAction(id) {
      if (id) {
        this.$router.push({
          name: "product_mainmenu_detail",
          query: { id, type: this.$route.params.type },
        });
      } else {
        this.$router.push({
          name: "product_mainmenu_detail",
          query: { type: this.$route.params.type },
        });
      }
	},
  //删除
  delAction(id) {
    this.$confirm("是否删除菜单?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id }
      );
      deleteMenu(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    }).catch(() => {});
	},
	change(e,id,name){
		let data = Object.assign(
			{
				sign: Md5(
					objKeySort(Object.assign(apiUrl().name), { id,[name]:e }) +
					apiUrl().appsecret
				),
			},
			apiUrl().name,
			{ id,[name]:e }
		);
		editMenu(data).then((res) => {
			this.listLoading = false;
			if (res.errcode == 0) {
				this.$message({
					message: "修改成功",
					type: "success",
				});
			} else {
				this.$message.error(res.errmsg);
			}
		});
	},
    // 菜单列表
    getData() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name), { type: this.type }) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: this.type }
      );
      menuList(data).then((res) => {
        this.listLoading = false;
        for (let i in res.data.list) {
          res.data.list[i].edit = false;
          res.data.list[i].ordid_old = res.data.list[i].ordid;
          this.selfNext(res.data.list[i].selfNext);
        }
        if (res.errcode == 0) {
          this.list = [
            {
              id: -1,
              ordid: "",
              name: "所有菜单",
              selfNext: res.data.list,
            },
          ];
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    selfNext(arr) {
      var _this = this;
      for (let i in arr) {
        arr[i].edit = false;
        arr[i].ordid_old = arr[i].ordid;
        if (arr[i].selfNext.length > 0) {
          _this.selfNext(arr[i].selfNext);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.maingl {
	.ordid_input{
		width:80px;
		input{
			text-align: center;
		}
	}
  /deep/.el-table{
		tr>th:not(:first-child)>.cell,
		tr>td:not(:first-child)>.cell{
			text-align: center;
		}
	}
  .handle_btn {
    padding: 0;
    border: 0;
    &+.handle_btn{
      margin-left: 20px;
    }
    &.del{
      color:#f78989;
    }
  }
  .main_crumbs {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    background: #f7f7f7;
    height: 43px;
    line-height: 43px;
    font-size: 14px;
    color: #181818;
    font-weight: bold;
    width: 100%;
    // display: flex;
    // justify-content: space-around;
    .tit {
      display: inline-block;
      width: 24%;
      text-align: center;
    }
  }
  .el-tree-node__content {
    position: relative;
  }
  .custom-tree-node {
    width: 100%;
    .btns {
      position: absolute;
      right: 3%;
      left: 24%;
      display: flex;
      justify-content: space-around;
      > div {
        width: 33%;
      }
    }
  }
  .main_table {
    margin-top: 20px;
    /deep/.el-table--border th:first-child .cell {
      padding-left: 70px;
    }
    /deep/.el-table--border td:first-child .cell {
      padding-left: 60px;
    }
    .maingl_ch {
      display: inline-block;
      margin-left: 10px;
      /deep/.el-checkbox__label {
        padding-left: 10px;
      }
    }
  }
  .newConBox.on {
    margin-left: -10px;
    padding-left: 10px;
  }
}
</style>
